<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.top,.bottom{
			position: absolute;
			height: 100px;
			width: 100%;
			background-color: grey;
		}
		.bottom{
			border-top:1px solid grey;
			background-color: #fff;
		}
		.top{
			top: 0;
			left: 0;
		}
		.bottom{
			left: 0;
			bottom: 0;
		}
		.top img{
			width: 40px;
			float: right;
			margin-right: 20px;
			margin-left: 10px;
			margin-top: 30px;
		}
		.top span{
			line-height: 100px;
			font-size: 30px;
			color: #fff;
			margin-left: 40px;
		}
		.list{
			margin-top: 25px;
			width: 32px;
			height: 50px;
			font-size: 10px;
			/*background-color: pink;*/
			cursor: pointer;
			float: left;
		}
		.list1{
			position: absolute;
			left: 10%;
		}
		.list2{
			position: absolute;
			left: 36%;
		}
		.list3{
			position: absolute;
			right: 36%;
		}
		.list4{
			position: absolute;
			right: 10%;
		}
		.ico1,.ico2,.ico3,.ico4{
			width: 32px;
			height: 32px;
		}
		.ico1{
			background-image: url(img/对话框1.png);
		}
		.ico2{
			background-image: url(img/通讯录1.png);
		}
		.ico3{
			background-image: url(img/发现-亮.png);
		}
		.ico4{
			background-image: url(img/我1.png);
		}
		.text{
			width: 100%;
			text-align: center;
			margin-top: 5px;
		}
		.middle{
			position: absolute;
			top: 100px;
			bottom: 100px;
			width: 100%;
			overflow: hidden;
		}
		.active{
			color: #1afa29;
		}
	</style>
</head>
<body>
	<div class="top">
		<span>微信(68)</span>
		<img src="img/增加.png">
		<img src="img/搜索.png">
	</div>
	<div class="middle">
		<iframe src="weixin.html" width="100%" height="100%" frameborder="0"></iframe>
	</div>
	<div class="bottom">
		<div class="list list1">
			<div class="ico1"></div>
			<div class="text active">微信</div>
		</div>
		<div class="list list2">
			<div class="ico2"></div>
			<div class="text">通讯录</div>
		</div>
		<div class="list list3">
			<div class="ico3"></div>
			<div class="text">发现</div>
		</div>
		<div class="list list4">
			<div class="ico4"></div>
			<div class="text">我</div>
		</div>

	</div>
</body>
</html>